import React , { Component } from 'react';
import PropTypes from 'proptypes';
import style from './index.css';

class Comments extends Component {
    constructor (props) {
        super(props)
        this.state = { editmode: false }
    }
    render () {
        const {create_user, content, create_time} = this.props
        return (
            <div className={style.comment}>
                <div className={style.userbar}>
                    <span className={style.username}>{create_user}</span>
                    <span className={style.createtime}>{create_time}</span>
                    <div className={style.editor}>
                        <span onClick={() => this.setState({editmode: true})}>edit</span>
                    </div>
                </div>
                {
                 this.state.editmdoe ? <textarea cols="30" id="" name="" rows="10" value={content}></textarea> : <p>{ content }</p>
                }
            </div>
        )
    }
}

Comments.propTypes = {
    username: PropTypes.string,
    content: PropTypes.string,
    create_time: PropTypes.string,
    create_user: PropTypes.string
}

export default Comments;
